<template>
  <div style="width:500px;border:1px solid #ccc;position:relative">
    <a-tag v-if="!isedit" style="position:absolute;right:0;top:0" size="small" @click="open">编辑</a-tag>
    <div v-else>
      <a-tag @click="isedit=false">保存</a-tag>
      <a-tag @click="cancel">取消</a-tag>
    </div>
    <a-descriptions :column="2" title="基本信息">
      <a-descriptions-item label="寄件人">
        <input type="text" v-if="isedit" v-model="info.nickname" />
        <div v-else>{{info.nickname}}</div>
      </a-descriptions-item>
      <a-descriptions-item label="寄件人">
        <input type="text" v-if="isedit" v-model="info.age" />
        <div v-else>{{info.age}}</div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        nickname: "Simba",
        age: 20,
      },
      bak: {},
      isedit: false,
    };
  },
  methods: {
    cancel() {
      this.info = this.bak;
      this.isedit = false;
    },
    open() {
      this.bak = JSON.parse(JSON.stringify(this.info));
      this.isedit = true;
    },
  },
};
</script>

<style scoped lang='scss'>
</style>